<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        *{
            outline: none !important;
        }
    </style>
</head>
<body>
    <div class="" id="app">
        <!-- 表格 -->
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>喜好</th>
                    <th>头像</th>
                    <th>点赞</th>
                    <th>功能</th>
                </tr>
            </thead>
            <tbody>
                {{each data}}
                    <tr>
                        <td>{{@$value._id}}</td>
                        <td>{{$value.name}}</td>
                        <td>{{$value.age}}</td>
                        <td>{{$value.like}}</td>
                        <!-- 图片上传模块 -->
                        <td>
                            <img src="{{$value.imageUrl}}" alt="" style="width: 60px;height: 60px;">
                        </td>
                        <!-- 点赞模块 -->
                        <td>
                            <form action="http://localhost:8082/state" method="POST" role="form">
                                <div class="form-group" style="display: none;">
                                    <label for="">参数id，这里是不显示在页面上的</label>
                                    <input type="text" class="form-control" id="" name="id"  value={{@$value._id}}>
                                </div>
                                <div class="form-group" style="display: none;">
                                    <label for="">参数state，这里是不显示在页面上的</label>
                                    <input type="text" class="form-control" id="" name="state" value={{$value.state}}>
                                </div>
                                <button type="submit" style="background-color:transparent;border-style:none;">
                                    <img :src="{{$value.state}}?'点赞.png':'点赞 (1).png'" alt="" style="width: 30px;height: 30px;" @click="doState($value._id,$value.state)">
                                </button>
                            </form>
                        </td>
                        <!-- 功能模块 -->
                        <td>
                            <a href="http://localhost:8082/toAdd/?id={{@$value._id}}">
                                <button type="button" class="btn btn-success">修改</button>
                            </a>
                            
                            <form action="http://localhost:8082/delete" method="POST" role="form">
                                <div class="form-group" style="display: none;">
                                    <label for="">参数id，这里是不显示在页面上的</label>
                                    <input type="text" class="form-control" id="hiddenId" name="id" placeholder="{{@$value._id}}" value={{@$value._id}}>
                                </div>
                                <button type="submit" class="btn btn-danger">删除</button>
                            </form>
                        </td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
        
        <!-- 添加按钮 -->
        <a href="http://localhost:8082/toAdd">
            <button type="button" class="btn btn-warning">添加新成员</button>
        </a>
    </div>
    <script>
        new Vue({
            el:"#app",
        })
    </script>
</body>
</html>